<!-- prettier-ignore -->
<template>
    

    <div class="music-player">
      <!-- <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image> -->
    <audio ref="audioPlayer" :src="audioSrc" autoplay loop controls playsinline>
      <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
    </audio>

    <div class="controls">
      <button @click="togglePlay" :class="{ playing: getIsPlaying }">
        <i class="fas fa-play"></i>
        <i class="fas fa-pause"></i>
      </button>
    </div>
  </div>
   
  </template>

<script>
import { mapActions, mapGetters,mapMutations } from "vuex";
import "@fortawesome/fontawesome-free/css/all.css";
export default {
  name: "MusicPage",
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      audioSrc: require("@/assets/music/1999.mp3"), // 引入音频文件
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  mounted() {
    
    this.$store.commit('audio/setAudio', this.$refs.audioPlayer);
    // this.setAudio(this.$refs.audioPlayer);
    this.togglePlay(); // 初始状态为播放
    
  },
  // beforeDestroy() {
  //   document.removeEventListener(
  //     "visibilitychange",
  //     this.handleVisibilityChange
  //   );
  // },
  methods: {
    ...mapActions("audio", ["playAudio", "pauseAudio"]),
    togglePlay() {
      // console.log("Current isPlaying:", this.isPlaying);
      // console.log("Actions:", mapActions("audio", ["playAudio", "pauseAudio"]));
      // console.log(
      //   "Getters:",
      //   mapGetters("audio", ["getAudio", "getIsPlaying"])
      // );
      // console.log('PlayAudio:', this.playAudio);
      // 设置播放状态
      if (this.isPlaying) {
        this.pauseAudio(this.isPlaying);
      } else {
        this.playAudio(this.isPlaying);
      }
    },
  },
  computed: {
    ...mapGetters("audio", ["getAudio", "getIsPlaying"]),
    ...mapMutations("audio", ['setAudio', 'setIsPlaying']),
    isPlaying() {
      return this.getIsPlaying;
    },
  },
};
</script>

<style scoped>
.music-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  margin: 50px auto;
  max-width: 300px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
  width: 100px;
}

.music-player .controls button {
  width: 50px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: #343a40;
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.music-player .controls button:hover {
  color: #007bff;
  transform: scale(1.1);
}

.music-player .controls button.playing i.fa-play {
  display: none;
}

.music-player .controls button.playing i.fa-pause {
  display: inline-block;
}

.music-player .controls button i.fa-play,
.music-player .controls button i.fa-pause {
  display: inline-block;
}

/* 新增样式，确保非播放状态下的图标显示 */
.music-player .controls button:not(.playing) i.fa-play {
  display: inline-block;
}

.music-player .controls button:not(.playing) i.fa-pause {
  display: none;
}
</style>
